<div class="sd-head">
  <div class="sd-title-s">监控管理工具 / 服务器应用配置 / 新增服务器应用配置</div>
</div>
<div class="sd-body">
  <div class="animated sd-content">
    <form nz-form [formGroup]="form">
      <nz-form-item>
        <nz-form-label [nzSm]="8" [nzXs]="30" nzFor="t_applicationname" nzRequired>应用名称
        </nz-form-label>
        <nz-form-control [nzSm]="6" [nzXs]="30">
          <input nz-input formControlName="t_applicationname" id="t_applicationname" placeholder="必填,最大长度为32">
          <nz-form-explain
            *ngIf="form.get('t_applicationname').dirty && form.get('t_applicationname').errors">
            <ng-container *ngIf="form.get('t_applicationname').hasError('required')">
              请输入应用名称
            </ng-container>
            <ng-container *ngIf="form.get('t_applicationname').hasError('maxlength')">
              应用名称长度不能超过32
            </ng-container>
          </nz-form-explain>
          <nz-form-extra>应用名称为应用jar包名</nz-form-extra>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSm]="8" [nzXs]="30" nzFor="t_developpath" nzRequired>应用部署路径
        </nz-form-label>
        <nz-form-control [nzSm]="8" [nzXs]="30">
          <div nz-row [nzGutter]="8">
            <div nz-col [nzSpan]="18">
              <input nz-input formControlName="t_developpath" id="t_developpath" placeholder="必填,最大长度为64">
            </div>
          </div>
          <nz-form-explain *ngIf="form.get('t_developpath').dirty && form.get('t_developpath').errors">
            <ng-container *ngIf="form.get('t_developpath').hasError('required')">
              请输入应用部署路径
            </ng-container>
            <ng-container *ngIf="form.get('t_developpath').hasError('maxlength')">
              应用部署路径长度不能超过64
            </ng-container>
          </nz-form-explain>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSm]="8" [nzXs]="30" nzFor="t_description">描述
        </nz-form-label>
        <nz-form-control [nzSm]="6" [nzXs]="30">
                    <textarea formControlName="t_description" id="t_description" nz-input rows="3"
                              placeholder="最大长度为255"></textarea>
          <nz-form-explain *ngIf="form.get('t_description').dirty && form.get('t_description').errors">
            <ng-container *ngIf="form.get('t_description').hasError('required')">
              请输入描述
            </ng-container>
            <ng-container *ngIf="form.get('t_description').hasError('maxlength')">
              描述长度不能超过255
            </ng-container>
          </nz-form-explain>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSm]="8" [nzXs]="30" nzFor="t_serverid" nzRequired>服务器选择
        </nz-form-label>
        <nz-form-control [nzSm]="6" [nzXs]="30">
          <nz-select name="select-error" formControlName="t_serverid">
            <nz-option nzCustomContent *ngFor="let option of servers" [nzValue]="option.serverid"
                       [nzLabel]="option.hostname">
              <img _ngcontent-c1="" class="user-avatar" src="assets/img/green.png"
                   *ngIf="option.status == 0">
              <img _ngcontent-c1="" class="user-avatar" src="assets/img/red.png"
                   *ngIf="option.status == 1">
              {{option.hostname}}
            </nz-option>
          </nz-select>
          <nz-form-explain *ngIf="form.get('t_serverid').dirty && form.get('t_serverid').errors">
            <ng-container *ngIf="form.get('t_serverid').hasError('required')">
              请选择相应服务器
            </ng-container>
          </nz-form-explain>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSm]="8" [nzXs]="30" nzFor="t_appshell">应用监控脚本
        </nz-form-label>
        <nz-form-control [nzSm]="8" [nzXs]="30">
          <div nz-row [nzGutter]="8">
            <div nz-col [nzSpan]="18">
               <textarea formControlName="t_appshell" id="t_appshell" nz-input rows="3"
                         placeholder="最大长度为255"></textarea>
            </div>

          </div>
          <nz-form-explain *ngIf="form.get('t_appshell').dirty && form.get('t_appshell').errors">
            <ng-container *ngIf="form.get('t_appshell').hasError('required')">
              请输入应用监控脚本
            </ng-container>
          </nz-form-explain>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item nz-row style="margin-bottom:8px;">
        <nz-form-control [nzOffset]="16" [nzSpan]="12">
          <button nz-button nzType="dashed" (click)="test()" [nzLoading]="loadingTest">
            应用测试
          </button>
          <button nz-button nzType="primary" (click)="submitForm()">提交</button>
          <button nz-button (click)="back()">取消</button>
        </nz-form-control>
      </nz-form-item>
    </form>
  </div>
</div>
